Units of Measurement

length units (length)

A unit of length is a number followed by a two-letter abbreviation of the unit of measurement that identifies the value, except the zero (0) value that doesn't require any unit of measurement specification. In certain cases, a positive  (+) or negative (-) value is allowed.

Examples:

10pt

1.2em

0.7em

12px

0

CSS2 uses two types of length units:

•	Relative length units

Relative length units have the advantage that dimensions are automatically adjusted, depending on the of the software used to view the document.

em	(the font size of the relevant font defined in the parent element. 1.2em = 120% of the font size defined in the parent element)

ex	(the x-height) of the relevant font defined in the parent element.)

px	(pixels, relative to the viewing device, for example, the screen)

•	Absolute units of measurement

Absolute length units are only useful when the physical properties of the output medium areknown.For this reason absolute length units are not used often.

in	(inches)

cm	(centimeters)

mm	(millimeters)

pt	(points; 1pt = 1/72in)

pc	(picas; 1pc = 12pt)

Percentages are expressed as numbers followed by the % symbol. Percentages are always relative to other values.

Colors

The value of a color is defined by its name (if the name of the color exists) or the  RGB color code.

Names of colors:

aqua, black, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.

Color Codes:

#rrggbb	ex. : #6666FF

rgb(x,x,x)	ex. : rgb(61,85,235)
where x is a number between 0 and 255 that represents each RGB color.

rgb(%,%,%)	ex.: rgb(50%,87%,23%)
to indicate the percentage of RGB in the color combination.


azimuth

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the horizontal point of origin of a sound content in the space provided, in order to provide an optimum reproduction when the content is played through an audio media.

Possible values	angle  [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] behind (may be combined with one of the following values) leftwards Moves the sound to the left, relative to the current angle. More precisely, subtracts 20 degrees. rightwards Moves the sound to the right, relative to the current angle. More precisely, adds 20 degrees. inherit (applies the parent element values)
Initial value	center (0 degrees)
Application	All elements.
Media types	audio: vocal synthesizer, tv sets


background

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the values of several individual background properties in one declaration block.

The individual properties are the following:

background-attachment, background-color, background-image, background-position, background-position, background-repeat

For more information, please refer to individual property descriptions.

Possible values	attachment [ scroll | fixed | inherit ] color Select a color by its name or its code using the color palette. image URL of the image source. position Percentage: Percentage value of the x-offset and the y-offset. In length measurement units: Value expressed in length units of the x-offset and  y-offset (em, ex, px, in, cm, mm, pt, pc). In terms of the the type of alignment: Vertical: [ top | center | bottom] Horizontal: [ left | center | right ] repeat [ repeat | repeat-x | repeat-y | no-repeat ] inherit (applies the parent element values)
Initial value
Application	All elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


#background_attachement
background-attachment

Index	See also	Basic CSS Concepts	Units of measurement

When a background image is defined (background-image property), the background-attachment property is used to indicate whether the image should scroll with the document content or should remain fixed.

Possible values	scroll The image scrolls with the contents. fixed   The image remains fixed while the contents scroll. inherit ( applies the parent element values)
Initial value	scroll
Application	All elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


background-color

Index	See also	Basic CSS Concepts	Units of measurement

The background-color property is used to define an element's background color.

Possible values	color Select a color by its name or its code using the color palette. transparent The element's background is set to transparent. inherit ( applies the parent element values)
Initial value	transparent
Application	All elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


background-image

Index	See also	Basic CSS Concepts	Units of measurement

The background-image is used to specify if an element has a background image and its positioning.

Possible values	url URL of the image source. none No image. inherit ( applies the parent element values)
Initial value	none
Application	All elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


background-position

Index	See also	Basic CSS Concepts	Units of measurement

When a background image has been defined, the background-position property is used to indicate the initial position of the image. The reference points are the upper left borders of the image and of the padding area.

The position is determined by the distance between the right border of the element's padding area and the right border of the image as well as the distance calculated in the same manner with respect to the top borders.

Possible values	According to units of measurement percentage Percentage value of the x-offset and the  y-offset. length Value expressed in length units of the x-offset and y-offset (em, ex, px, in, cm, mm, pt, pc). According to types of alignment horizontal (horz-align) [ left | center | right ] vertical (vert-align) [ top | center | bottom ] inherit ( applies the parent element values)
Initial value	0% 0%
Application	All block level elements and replaced elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


background-repeat

Index	See also	Basic CSS Concepts	Units of measurement

When a background image is defined, this property indicates how the image should be repeated in the area occupied by the element content.

Possible values	repeat  Repeated horizontally and vertically. repeat-x  Only repeated horizontally. repeat-y  Only repeated vertically. no-repeat  No repetition, only one copy of the image is displayed. inherit ( applies the parent element values)
Initial value	repeat
Application	All elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


border

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in one declaration block the width, color and style of the element's borders.

To define each of the border properties, use the individual border properties:

border-collapse, border-color, border-spacing [image], border-style, border-top, border-right, border-bottom, border-left, border-width

Possible values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). style (type of border: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] color Select a color by its name or its code using the color palette. inherit ( applies the parent element values)
Initial value	Refer to individual border properties
Application	All elements.
Target media	visual: computer screens, tv sets, projectors, tty screens


border-collapse

Index	See also	Basic CSS Concepts	Units of measurement

The border-collapse property defines if row and cell borders are treated as one unit or separately as in HTML.

collapse	separate
Possible values	collapse  Borders are treated as one unit. separate  Borders are defined separately. inherit (applies the parent element values)
Initial value	collapse
Application	All table and inline elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the color of each of the four borders of an element. Four different values can be set, one for each border. The color values must be separated by spaces.

Values	color Select a color by its name or its code using the color palette. transparent  Sets transparent borders. inherit ( applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-spacing

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the distance between adjacent borders in cells.

Values	length  Value expressed in units of length (em, ex, px, in, cm, mm, pt, pc). There are two acceptable values, the first for the horizontal distance and the second for the vertical distance. inherit ( applies the parent element values)
Initial value	0
Application	All table and inline elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in one style declaration block the four borders of an element. One to four values can be specified.

•	If only one value is defined, then this value is automatically used for the four borders.

•	If four values are specified, then these values are applied to the borders in the following order:
top, right, bottom and left.

•	If two or three values are specified, each value missing is defined by the opposite value.

It is also possible to define each of the borders independently with the use of the related individual properties:
border-top-style, border-right-style, border-bottom-style, border-left-style

Values	style  (type de border: dotted, solid, groove, etc.)   [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-top

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width, color and style of the element's top border  using only one declaration block

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-right

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width, color and style of the element's right border in only one declaration block.

Values	width (border width) thickness [ thin | medium | thick ] length Value expressed in length units (em, ex, px, in, cm, mm, pt, pc). style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-bottom

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width, color and style of the element's bottom border using only one declaration block.

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-left

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width, color and style of the element's left border using only one declaration block.

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-top-color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the color of the element's top border .

Values	color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	The value of the color property.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-right-color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the color of the element's right border.

Values	color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	The value of the color property.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-bottom-color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the color of the element's bottom border.

Values	color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	The value of the color property.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-left-color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the color of the element's left border.

Values	color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	The value of the color property.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-top-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the style of the element's top border.

Values	style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-right-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the style of the element's right border.

Values	style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-bottom-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the style of the element's bottom border.

Values	style (border type: dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-left-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the style of the element's left border.

Values	style (border type : dotted, solid, groove, etc.) [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-top-width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width of the element's top border.

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-right-width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width of the element's right border.

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-bottom-width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width of the element's bottom border.

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-left-width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the width of the element's left border.

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


border-width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in only one style declaration block the four borders of an element. One to four values can be specified.

•	If only one value is defined, then this value is automatically used for the four borders.

•	If four values are specified, then these values are applied to the borders in the following order:
top, right, bottom and left.

•	If two or three values are specified, each value missing is defined by the opposite value.

 It is also possible to define each of the borders independently with the use of the related individual properties:
border-top-width, border-right-width, border-bottom-width, border-left-width

Values	width (border width) thickness [ thin | medium | thick ] length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


bottom

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the distance between the bottom border of the element's box and the adjacent border of the box containing the first box. The bottom property cannot be defined unless the position property of the element is first defined.

Values	As a percentage: Percentage value of the x-offset and the y-offset. In length measurement units: In length measurement units: Value expressed in length units of the x-offset and  y-offset (em, ex, px, in, cm, mm, pt, pc). auto inherit (applies the parent element values)
Initial value	auto
Application	All positioned elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


caption-side

Index	Basic CSS Concepts	Units of measurement

This property is used to specify how the contents of the <CAPTION> element must be placed around the table to which it is attached.

Values	top at the top of the table. right to the right of the table. left to the left of the table. bottom at the bottom of the table. inherit (applies the parent element values)
Initial value	top
Application	The "caption" elements of the tableau.
Target Media	visual: computer screens, tv sets, projectors, tty screens


clear

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify that the side of a box cannot be adjacent to the preceding floating box. The effect achieved is that the box shifts towards the bottom. The effect is null if the preceding element is not a floating element.

Values	left left side. right right side. both both sides. none on neither side. inherit (applies the parent element values)
Initial value	none
Application	All block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


clip

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the clipping region of the element's content box and it is applied when the overflow property is used in conjunction with the "visible" value.

Values	auto The region affected by the property has the same size and location as the box or boxes of the element.  shape Possible value: rect (top, right, bottom, left).  Parameters top, right, bottom et left can be defined using a defined length in em, ex, px, in, cm, mm, pt, pc or with  auto. inherit (applies the parent element values)
Initial value	auto
Application	All block level elements and replaced elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the foreground color of the element's text content.

Values	color Select a color by its name or its code using the color palette. inherit (applies the parent element values)
Initial value	Depends of the browser software or the reading device used.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


content

Index	See also	Basic CSS Concepts	Units of measurement

This property is used with the pseudo-elements :before or:after to insert the contents before or after the element for which it is defined.For example, to enter the word  Chapter at the beginning of every title element<H1>).

Values	string text placed between quotation marks URL source address of the contents to be inserted. counter  For numbering elements. See also [ counter-increment | counter-reset]. open-quote and  close-quote These values are replaced by the corresponding values of the quotes property. no-open-quote no-close-quote Does not insert contents. The counter of level of nesting for quotes is nevertheless increased or decreased. attr(x) The value is replaced by the  element's x attribute. inherit (applies the parent element values)
Initial value	Empty content
Application	The pseudo-elements :before and :after .
Target Media	All


counter-increments
counter-increment

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the counter's increment value.

Values	Counter-name  (several counter names are accepted). increment value number none inherit (applies the parent element values)
Initial value	None
Application	All elements.
Target Media	All


counter-reset

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to reset the counter's value to a different value.

Values	Counter-name  Name of the counter number Value (number). If it's omitted, the counter is reset to zero. none inherit (applies the parent element values)
Initial value	None
Application	All elements.
Target Media	All


cursor

Index	Basic CSS Concepts	Units of measurement

This property specifies the type of cursor to be displayed for the pointing device (ex.: mouse cursor).

Values	auto The cursor is determined based on the context of the current browser software or the reading device used. crosshair Cursor shaped like a cross. default The platform-dependent default cursor. Often rendered as an arrow. pointer The cursor indicates a hyperlink (usually takes the form of a hand when it is placed over a link). move Indicates that something is to be moved. Resize cursors:  [e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize]  (ex.: ne-resize indicates that movement starts from the north-east corner of the box. text Cursor text. wait The cursor indicates that the program is busy and the user should wait for completion of the process. help Help cursor (?). URL(address) address of the source file containing the cursor.  inherit (applies the parent element values)
Initial value	auto
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


direction

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the base writing direction inside blocks. In addition, it specifies the position of an incomplete last line in a block in case of a text alignment that is set to "justify".

Values	ltr Left-to-right direction. rtl Right-to-left direction. inherit (applies the parent element values)
Initial value	ltr
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


display

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the type of box that must be used for the element.

Values	box Block type box inline Inline box. list-item Block type box which includes a list-item box. marker This value declares a marker (inline box) before or after an element attached to the :before or :after pseudo-elements.  run-in This value creates a box for the current element. compact This value creates a box for the title of a list of items. none No boxes are created for the element. The contents and descendants of the element are invisible. Table type [table | inline-table | table-row-group | table-column | table-column-group | table-header-group | table-footer-group | table-row | table-cell | table-caption] These values indicate that the element must behave like a table type element. inherit (applies the parent element values)
Initial value	inline
Application	Elements inline elements
Target Media	visual: computer screens, tv sets, projectors, tty screens


empty-cells

Index	See also	Basic CSS Concepts	Units of measurement

This property controls the rendering of borders of empty cells (only when border-collapse: separate).

Values	show Borders are drawn and are visible around empty cells. hide No border appears around any empty cell. inherit (applies the parent element values)
Initial value	show
Application	Table cell elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


float

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define a box that floats to the left or right of the containing box.

Values	left Box is positioned to the left. right Box is positioned to the right.  none The box does not float.  inherit (applies the parent element values)
Initial value	none
Application	All elements except positioned elements and those that generate content.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in one declaration block an element's font properties.

For a detailed description of certain values, refer to the individual properties of:

font-style, font-variant, font-weight, font-size, font-family

Values	font-style [normal | oblique | italic | inherit] font-variant [normal | small-caps | inherit] font-weight [normal | bold | bolder | lighter | 100 to 900 | inherit] font-size [<absolute-size> | <relative-size | length | percentage | inherit] line-height For block level elements where contents are  inline elements, this value defines the minimum height of each  inline box:  [normal | <length> | <number> | <percentage> | inherit]. font-family [family-name | family generic | inherit] caption Font for buttons, scrolling lists, etc. icon Fonts used to label icons. menu Fonts used in menus. message-box Fonts used in dialog boxes. small-caption Fonts used for labeling small control buttons. status-bar Fonts used in window status bars. inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-family

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to determine where the fonts may be used with an element. The order of the font names is important since the system's browser software has to use the first valid font found in the series.

Values	family-name Name or names of fonts, separated by commas. Names of fonts that have more than one word must be written within quotation marks. ex. : Arial, "Arial Black" generic-family Font generic families: [serif | sans-serif | cursive | fantasy | monospace]. inherit (applies the parent element values)
Initial value	Depends on the browser software used.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-size

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the font size used by the element's contents.

Values	absolute-size [xx-small | x-small | small | medium | large | x-large | xx-large] relative-size [larger | smaller] Value determined by the font size of the parent element. length value expressed in length units (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage of the parent element's  font size.  inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-size-adjust

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to adjust the font size of a substitute font. The effect achieved is reflected in the font used as the first choice indicated in the font-family property.

For example, Verdana and Times New Roman fonts do not have the same size aspect value when they are set to 9pt. Verdana has an aspect value of 0.58 when that of Times New Roman is 0.46. If these two fonts are specified, the way the first is displayed is very different to that of the second font. To get around this problem, the font-size-adjust property is used to perform a calculation to properly resize the resulting font.

Values	number The number refers to the aspect value of the first choice of fonts and is necessary to calculate the correct adjustment. To learn about font aspect values, refer to a table containing typeface specifications. none Does not make changes to sizing. inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-stretch

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to modify the implicit width of the fonts found in an element.

The following are the different values that may be used, listed from the smaller to the larger widths possible:

Values	ultra-condensed extra-condensed semi-condensed normal No effect on the implicit width. semi-expanded expanded extra-expanded ultra-expanded Special values: wider This relative value sets the value to the next expanded value above the inherited value. narrower This relative value sets the value to the next compressed value below the inherited value. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify one of three font faces for text used in an element.

Values	normal Specifies a Roman font type. italic Specifies italic or cursive font (fonts that contain the name Italic, Cursive or Kursiv). oblique Specifies an oblique font type (fonts that contain the name Oblique, Slanted or Incline) inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-variant

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify if characters are displayed in small-caps (small capital letters).

Values	normal Font without small-caps. small-caps Fonts with small-caps. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


font-weight

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify a font weight (thickness).

Values	100 to 900 These values indicate the level of weight, from  lighter (100) to heavier (900) weight or darkness.   normal Same as 400. bold Same as 700. bolder Specifies a weight level a step higher than the inherited value but not higher than 900. lighter Specifies a weight level a step lower than the inherited value but not lower than 100. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


height

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the height of the element's content box.

Values	length Value expressed in length units  (em, ex, px, in, cm, mm, pt, pc) percentage Value expressed as a percentageThe value is based on the height of the containing box. auto The value depends on the values of other properties. inherit (applies the parent element values)
Initial value	auto
Application	All elements except non-replaced inline elements, table columns and column groups.
Target Media	visual: computer screens, tv sets, projectors, tty screens


left

Index	See also	Basic CSS Concepts	Units of measurement
This property is used to define the distance between the element's box left border and the adjacent border of the box containing the first box. The left  property cannot be defined unless the position property of the element is first defined.

Values	As a percentage: Percentage value of the x-offset and the y-offset. In length measurement units: In length measurement units: Value expressed in length units of the x-offset and  y-offset (em, ex, px, in, cm, mm, pt, pc). auto inherit (applies the parent element values)
Initial value	auto
Application	All positioned elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


letter-spacing

Index	Basic CSS Concepts	Units of measurement

This property is used to determine spacing between characters.

Values	normal The normal spacing between characters remains the same. length The value expressed in length units (em, ex, px, in, cm, mm, pt, pc), is added to the normal character spacing.  A zero (0) value prevents any modification to the spacing between characters. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


line-height

Index	Basic CSS Concepts	Units of measurement

The impact of this property depends on the type of element in which it is applied.

1.	In block level elements containing  inline elements, the property defines the minimum height of each of the inline boxes.

2.	In inline elements, the property specifies the exact height of each of the boxes generated by the element.

Values	normal Indicates that a reasonable height must be defined, based on the font size used in the elements. length The height of the box is set to the specified value. This value may include the following units of measurement: em, ex, px, in, cm, mm, pt, pc. number The number indicated, multiplied by the font size. percentage The percentage indicated, multiplied by the font size. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


list-style

Index	See also	Basic CSS Concepts	Units of measurement

This property  is used to define in one declaration block individual property values: list-style-type, list-style-image and list-style-position. These properties are used to indicate how to mark items in lists.

Values	list-style-type [disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | hebrew | georgian | armenian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit] list-style-position [inside | outside | inherit] list-style-image [URL | none | inherit] inherit (applies the parent element values)
Initial value	disc
Application	Elements with the display: list-item  property.
Target Media	visual: computer screens, tv sets, projectors, tty screens


list-style-image

Index	See also	Basic CSS Concepts	Units of measurement

This property sets is used to specify the image that will be used in front of each item in a list.

Values	URL Address of the image source. none No image is used.  inherit (applies the parent element values)
Initial value	none
Application	Elements with the display: list-item  property.
Target Media	visual: computer screens, tv sets, projectors, tty screens


list-style-position

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies the position of the marker in front of items in a list.

Values	inside The marker box is the first inline box in the box of the main block. outside The marker box is outside the box of the main block. inherit (applies the parent element values)
Initial value	outside
Application	Elements with the display: list-item  property.
Target Media	visual: computer screens, tv sets, projectors, tty screens


list-style-type

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies the appearance of the marker in front of items in a list.

Values	disc Circle filled inside. circle Circle empty inside. square Black square. decimal Decimal numbers (1, 2, 3, etc.) decimal-leading-zero Decimal numbers with a leading zero (0) before the digit (01, 02, 03,… 23, 24) lower-roman lowercase Roman numerals (i, ii, iii, iv, etc.) upper-roman uppercase Roman numerals (I, II, III, IV, etc.) Depending on the language [hebrew | georgian | armenian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none ] lower-latin lowercase letters (a, b, c, etc.) upper-latin uppercase letters (A, B, C, etc.) inherit (applies the parent element values)
Initial value	disc
Application	Elements with the display: list-item  property.
Target Media	visual: computer screens, tv sets, projectors, tty screens


margin

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the value of the four margins of a box in one declaration block.

The individual properties are: margin-top, margin-right, margin-bottom et margin-left.

The property may contain 1 to 4 values:

•	If only one value is defined, then this value is automatically used for the four margins.

•	If two values are specified, then the first value is applied to the top and bottom margins and the second value to the right and left margins;

•	If three values are specified, the first is applied to the top margin, the second to the left and right margins and the third to the bottom margin;

•	If four values are specified, then these values are applied to the margins in the following order:
top, right, bottom and left.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. This is true for the top and bottom margins. auto Automatically calculated. inherit (applies the parent element values)
Initial value	Not defined
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


margin-top

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the value of the top margin of a box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. This is true for the top and bottom margins. auto Automatically calculated. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


margin-right

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the value of the right margin of a box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. This is true for the top and bottom margins. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


margin-bottom

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the value of the bottom margin of a box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. This is true for the top and bottom margins. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


margin-left

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the value of the left margin of a box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. This is true for the top and bottom margins. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


marker-offset

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies the distance between the  box of a marker and the principal box to which the marker is associated.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). auto The distance is defined by the browser software. inherit (applies the parent element values)
Initial value	auto
Application	Elements with the property display:marker
Target Media	visual: computer screens, tv sets, projectors, tty screens


marks

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify if page aligning marks or crop marks must be printed when the page is printed. Used with the special @page rule.

Values	crop Crop marks. cross Alignment marks. none No marks or crops. inherit (applies the parent element values)
Initial value	none
Application	Pages.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


max-height

Index	See also	Basic CSS Concepts	Units of measurement

These two properties allow authors to constrain the maximum block height of an element.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. none No limit on height. inherit (applies the parent element values)
Initial value	none
Application	All elements except tables and non-replaced inline elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


max-width

Index	See also	Basic CSS Concepts	Units of measurement

This property allows authors to constrain the maximum block width of an element.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. none No limit on width. inherit (applies the parent element values)
Initial value	none
Application	All elements except tables and non-replaced inline elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


min-height

Index	See also	Basic CSS Concepts	Units of measurement

This property allows authors to constrain the minimum block height of an element.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. none No limit on height. inherit (applies the parent element values)
Initial value	none
Application	All elements except tables and non-replaced inline elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


min-width

Index	See also	Basic CSS Concepts	Units of measurement

This property allows authors to constrain the minimum block width of an element.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. none No limit on width. inherit (applies the parent element values)
Initial value	none
Application	All elements except tables and non-replaced inline elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


orphans

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the minimum number of lines in a paragraph that must be left at the bottom of the page when printing.

Values	number A number value. inherit (applies the parent element values)
Initial value	2
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


overflow

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to indicate if the contents must be clipped when it overflows (excessive contents for the size defined for the box).

  Microsoft Internet Explorer 5 also interprets overflow-x and overflow-y properties.

overflow-x is used when text overflows the width of the box.

overflow-x is used when text overflows the height of the box.

The possible values for these two properties are the same as the values for the overflow property.

Values	visible This value indicates that content is not clipped and overflows outside the box.  hidden Excess contents are clipped. scroll The browser software used must provide a scrolling mechanism to allow reading the excess contents. auto The results depend on the browser software used. Normally a scrolling mechanism must be available. inherit (applies the parent element values)
Initial value	visible
Application	Block level elements and replaced elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


padding

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in one declaration block, the four padding areas of the element's box.

The individual properties are the following:

padding-top, padding-right, padding-bottom and padding-left.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. inherit (applies the parent element values)
Initial value	no initial value
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


padding-top

Index	See also	Basic CSS Concepts	Units of measurement

This property sets the top padding area of the element's box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


padding-right

Index	See also	Basic CSS Concepts	Units of measurement

This property sets the right padding area of the element's box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


padding-bottom

Index	See also	Basic CSS Concepts	Units of measurement

This property sets the bottom padding area of the element's box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


padding-left

Index	See also	Basic CSS Concepts	Units of measurement

This property sets the left padding area of the element's box.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. inherit (applies the parent element values)
Initial value	0
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


page

Index	See also	Basic CSS Concepts	Units of measurement

This property can be used to indicate a particular type of page. The targeted element must be either displayed or printed accordingly. This property is used with the special @page rule.

Values	Identifier ex.: narrow | rotated auto
Initial value	auto
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projector, tty screens printing: printers


page-break-before

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify if a page break should be inserted before an element. Useful during printing.

Values	auto Depends on the context and the browser software used. always always. avoid never. left Odd page break (left page). right Even page break (right page). inherit (applies the parent element values)
Initial value	auto
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


page-break-after

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify if a page break should be inserted after an element. Useful during printing.

Values	auto Depends on the context and the browser software used. always always. avoid never. left Odd page break (left page). right Even page break (right page). inherit (applies the parent element values)
Initial value	auto
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


page-break-inside

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify if a page break should be inserted inside the contents of an element. Useful during printing.

Values	auto Depends on the context and the browser software used. avoid never. inherit (applies the parent element values)
Initial value	auto
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


position

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define box positioning.

Values	static The box is positioned as a normal box.  relative Offset positioning calculated according to the normal position and the offset value. absolute Absolute positioning determined by the top, right, bottom and left properties. fixed Positioning is absolute and fixed. Indifferent to scrolling.  inherit (applies the parent element values)
Initial value	static
Application	All elements except generated contents.
Target Media	visual: computer screens, tv sets, projectors, tty screens


quotes

Index	Basic CSS Concepts	Units of measurement

This property is used to specify replacement values for the open-quotes and close-quotes parameters. These parameters make reference to quotation marks that must be inserted for quotes embedded in the element's content.  It is also necessary to specify the language for the quotation marks.

For example, in the style sheet:

/* Specification of quotation marks pairs for two languages */

Q:lang(fr) { quotes: '«'  '»' }

Where the attribute lang has a value of fr for the element (ex.: <HTML lang="fr">)

Q:lang(en) { quotes: '"' '"' }

Where the attribute lang has a value of en for the element (ex.: <HTML lang="en">)

/* Insertion of  'open' and 'close' quotation marks for the Q element */

Q:before { content: open-quote }
Q:after { content: close-quote }

Values	none No quotation marks are inserted. <string> <string> The quotation marks are indicated in pairs and written inside simple quotation marks  ('«'  '»' ) or double when simple quotation marks must be used  ("'" "'"). inherit (applies the parent element values)
Initial value	Depends on the browser software used.
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


right

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the distance between the right border of the element's box and the adjacent border of the box containing the first box. The right property cannot be defined unless the position property of the element is first defined.

Values	As a percentage: Percentage value of the x-offset and the y-offset. In length measurement units: In length measurement units: Value expressed in length units of the x-offset and  y-offset (em, ex, px, in, cm, mm, pt, pc). auto inherit (applies the parent element values)
Initial value	auto
Application	All positioned elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


size

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the size and orientation of a box in a page.
Used with the special @page rule.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). One or two values can be defined, separated by a space. auto Values are determined according to the type of printing paper. landscape Relative value. The page box is the same size as the target (printing parameters) and the longer sides are horizontal.  portrait Relative value. The page box is the same size as the target (printing parameters) and the longer sides are vertical. inherit (applies the parent element values)
Initial value	auto
Application	The page context.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


table-layout

Index	Basic CSS Concepts	Units of measurement

This property is used to specify the layout of a table in a page. The two possible layout for tables are: auto and fixed.

Values	auto The table layout depends on the length of its columns and borders. The length of each column depends on the cells content. fixed This is the fastest method, the horizontal layout of the table depends on the table's width, the length of the columns, borders and spacing between cells. The layout does not depend on the cells' content. inherit (applies the parent element values)
Initial value	auto
Application	The table elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


text-align

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the type of alignment for an element's text.

Values	left left alignment. right right alignment. center centered alignment.  justify justified alignment.  string This type of alignment applies only to table cells. This property is used to align characters as per a given value. Usually a comma or a point is used to align numbers from one cell to another inside columns. inherit (inherit: applies the parent element values)
Initial value	Depends on the browser software used.
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


text-decoration

Index	See also	Basic CSS Concepts	Units of measurement

This property describes decorations that are added to the text of an element. If the property is applied for a block level element, all inline descendants of the element are affected by the property.

Values	none No decoration is added to text.  underline Text is displayed with single underlining.  overline Text is displayed with a line over it. line-through Each line of text has a line through the middle. blink Text blinks. inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


text-indent

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to indicate the indentation of the first line of text in a block level element.

Values	length value expressed in length units  (em, ex, px, in, cm, mm, pt, pc). percentage Value expressed as a percentage. The value is based on the containing box. inherit (applies the parent element values)
Initial value	0
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


text-shadow

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to create a shadow effect over text.

Values	none No shadow effect. color Define the color for the shadow.  Select a color by its name or its code using the color palette. length(3) Only three values can be set. The first value defines the horizontal distance between text and shadow (a positive value defines the distance towards the right while a negative value defines the distance towards the left). The second value defines the vertical distance between text and shadow (a negative value defines the distance towards the bottom). The third value (optional) defines the shadow's flow factor . inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


text-transform

Index	See also	Basic CSS Concepts	Units of measurement

This property controls capitalization effects of an element's text.

Values	none No capitalization effect on text. capitalize Puts the first character of each word in uppercase. uppercase Puts all characters of each word in uppercase. lowercase Puts all characters of each word in lowercase. inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


top

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the distance between the top border of the element's box and the adjacent border of the box containing the first box. The top property cannot be defined unless the position property of the element is first defined.

Values	As a percentage: Percentage value of the x-offset and the y-offset. In length measurement units (length): Value expressed in length units of the x-offset and  y-offset (em, ex, px, in, cm, mm, pt, pc). auto inherit (applies the parent element values)
Initial value	auto
Application	All positioned elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


unicode-bidi

Index	See also	Basic CSS Concepts	Units of measurement

Certain characters are written and read from left to right.  Examples are the Arab and Hebrew languages.
In some instances there are documents are written in different languages where the text flow direction is not the same. The unicode-bidi property is used to properly define parameters for the browser software to interpret the direction of the flow of text.  The direction property is also used in conjunction with these values.

Values	normal When this value is used, it indicates that the element should not open a new embedding level to modify the direction of text. embed If the element is inline level, the embed value opens an additional level of embedding and the direction property indicates the direction of the flow of writing that should be applied. The bidirectional algorithm in effect for the element is not altered, except at the embedding level. bidi-override If the element is inline level or block level, this value overrides the bidirectional algorithm and applies the direction property value inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


vertical-align

Index	Basic CSS Concepts	Units of measurement

This property is used to specify the vertical alignment of inline element contents or boxes generated with inline elements.

Values	baseline Align the baseline of the box with the baseline of the parent box.  middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent (x-height = height of letter x). sub Lower the baseline of the box to the proper position for subscripts of the parent's box. super Raise the baseline of the box to the proper position for superscripts of the parent's box. text-top Align the top of the box with the top of the parent element's font. text-bottom Align the bottom of the box with the bottom of the parent element's font. top Align the top of the box with the highest element of the line. bottom Align the bottom of the box with the lowest element of the line. length With a positive value, raise the box by a distance equal to this value. With a negative value, lower the box by a distance equal to this value. The value can be expressed in any of the following units of measurement: em, ex, px, in, cm, mm, pt, pc. percentage With a positive value, raise the box by a distance equal to this value. With a negative value, lower the box by a distance equal to this value. A percentage of the line-height value.  inherit (applies the parent element values)
Initial value	baseline
Application	Inline and table elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


visibility

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to indicate whether the box generated by an element is visible or not.

Values	visible The box is visible. hidden The generated box is invisible, but still affects the page layout. collapse The visibility property uses this value for cells, groups of cells, columns and groups of columns in order to make them disappear and allow displaying a different content. inherit (applies the parent element values)
Initial value	inherit
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


white-space

Index	Basic CSS Concepts	Units of measurement

This property is used to indicate how white-space inside the element is handled.

Values	normal This value tells the browser software to merge space sequences (several consecutive spaces) into one space. pre This value tells the browser software to keep the space sequences intact (several consecutive spaces). nowrap This value tells the browser software to merge the space sequences (several consecutive spaces) into one space but to deactivate the automatic word wrap function. inherit (applies the parent element values)
Initial value	normal
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


widows

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the minimum number of lines of a paragraph that must be left at the top of the page when printing.

Values	number A number value. inherit (applies the parent element values)
Initial value	2
Application	Block level elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens printing: printers


width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the width of a box generated by the block level elements and replaced elements.

Values	length Indicates a fixed length. These values may include the following units of measurement: em, ex, px, in, cm, mm, pt, pc. percentage Indicates the length calculated using a percentage of the width of the containing box. auto The length depends on values of other properties (margin, margin-left, left, etc.) inherit (applies the parent element values)
Initial value	auto
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


word-spacing

Index	Basic CSS Concepts	Units of measurement

This property is used to indicate spacing between words.

Values	normal Normal spacing between words as defined by the browser software. length This property is used to specify a value that is added to the normal spacing between words. These values may include the following units of measurement: em, ex, px, in, cm, mm, pt, pc. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


z-index

Index	Basic CSS Concepts	Units of measurement

This property is used to specify the positioning of an element in in a stacking  level containing other elements.

Values	integer A number indicates the positioning of an element in the stacking level. For example, in a stack containing three elements which have been numbered 0, 1 and 2, the element whose value is 2 will be placed on top of the stack, while element zero (0) will be placed beneath the rest, and element 1 between 0 and 2. Zero (0) value indicates the beginning of a new stack. auto The browser software determines the positioning of elements according to a set of rules. inherit (applies the parent element values)
Initial value	auto
Application	All positioned elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


behavior

Index	Basic CSS Concepts	Units of measurement

This property is used to determine the positioning of a DHTML effect which will be run from a script, a binary file or one of the DHTML default effects displayed by Explorer 5. The same element may have defined more than one effect. For additional information on the subject, visit the MSDN site that deals with DHTML: http://www.msdn.microsoft.com/workshop/author/dhtml/reference/properties/

Values	URL URL address of a script or a binary file. default Choice of one of the DHTML effects displayed by Internet Explorer 5.
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


filter

Index	Basic CSS Concepts	Units of measurement

This property is used to insert or extract a filter or a collection of filters to be applied on the element's content. Possible effects are numerous. For more information visit the following site: http://www.msdn.microsoft.com/workshop/author/css/reference/attributes.asp

Values	filtertype1 (parameter1, parameter2…) filtertype2 (parameter1, parameter2…) inherit (applies the parent element values)
Application	BODY, BUTTON, DIV, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, MARQUEE, runtimeStyle, SPAN, style, TABLE, TD, TEXTAREA, TH
Target Media	visual: computer screens, tv sets, projectors, tty screens


layout-grid

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to insert or extract the grid properties of documents that specify page layout of text.

Refer to individual properties: layout-grid-mode, layout-grid-type, layout-grid-line, layout-grid-char, layout-grid-space.

Values	mode  Does not take into account the available value of the property layout-grid-mode. type  Does not take into account the available value of the property layout-grid-mode. line  Does not take into account the available value of the property layout-grid-mode. char  Does not take into account the available value of the property layout-grid-mode. space  Does not take into account the available value of the property layout-grid-mode. inherit (applies the parent element values)
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


layout-grid-char

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify a grid size for the characters used in the element's text.

Values	none No character grid is applied. auto The largest character is used to adjust the character grid of the element. length The value is expressed in length units. The following units of measurement can be used: em, ex, px, in, cm, mm, pt, pc. percentage The value is expressed as a percentage based on the size of the parent element. inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


layout-grid-line

Index	See also	Basic CSS Concepts	Units of measurement

The effect of this property is similar to the line-height property. Used to adjust the line height of an element.

Values	none No line grid is applied. auto The largest character is used to adjust the grid. length The value is expressed in length units. The following units of measurement can be used: em, ex, px, in, cm, mm, pt, pc. percentage The value is expressed as a percentage based on the size of the parent element. inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


layout-grid-mode

Index	See also	Basic CSS Concepts	Units of measurement

This property indicates if the text grid uses two dimensions.

Values	both Both the character and line grid are used. none No grid is used. line Only the line grid is used. char Only the character grid is used. inherit (applies the parent element values)
Initial value	both
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


layout-grid-type

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify a grid for an element.

Values	loose Grid used for Chinese or Korean characters only. strict Grid used for Japanese characters only. fixed Grid used for monospaced page layout.  inherit (applies the parent element values)
Initial value	loose
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


layout-grid-char-spacing

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the character spacing grid when the layout-grid-type property is set to the value loose.

Values	auto The largest character is used to define the grid. length The value is expressed in length units. The following units of measurement can be used: em, ex, px, in, cm, mm, pt, pc. percentage The value is expressed as a percentage based on the size of the parent element. inherit (applies the parent element values)
Initial value	auto
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


line-break

Index	Basic CSS Concepts	Units of measurement

This property is used to define automatic line breaks rules for the Japanese language.

Values	normal The normal method for line break is used. strict Strict rules are used. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


text-justify

Index	See also	Basic CSS Concepts	Units of measurement

This property defines the type of alignment that will be used to justify the element's text.

Values	inter-word Align text by increasing spacing between words. newspaper Align text by increasing or diminishing spacing between characters and words. distribute Similar to the newspaper value, but optimized for Asian languages. distribute-all-lines Similar to the distribute value but also justifies the last line. This method is used for ideographic writing. inter-ideograph Apply total justification to ideographic writing. Decreasing or increasing spacing between ideographs and words. auto The browser software determines the justification algorithm to be used. inherit (applies the parent element values)
Initial value	auto
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


word-break

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify whether line breaks can be placed in the middle of words.

Values	normal Allow line breaks in the middle of words. break-all Similar to the normal value for Asian language text.  keep-all Prevents line breaks for Chinese, Japanese and Korean languages. Similar to normal for all non-Asian languages. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens


outline

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to add an "outline" around elements such as buttons, form fields, etc. Outlines do not take up extra space and they can have other forms besides rectangular shapes. The outline property is used to define in one declaration block several values.

Values	<outline-width> Values similar to the <border-width> property.  <outiline-style> Values similar to the <border-style> property. <outline-color> Values similar to the <color> property. inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens Interactive


outline-width

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the visible width of the outline placed around the element.

Values	thin Thin width medium Medium width thick Thick width length The value is expressed in length units. The following units of measurement can be used: em, ex, px, in, cm, mm, pt, pc. inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens Interactive


outline-style

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the style of the outline placed around the element.

Values	style  (border type: dotted, solid, groove, etc.)   [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens Interactive


outline-color

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the color of the outline placed around the element.

Values	color Select a color by its name or its code using the color palette. invert The color is inverted. inherit (applies the parent element values)
Initial value	invert
Application	All elements.
Target Media	visual: computer screens, tv sets, projectors, tty screens Interactive


cue

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in one declaration block the values for the cue-before and cue-after properties.

It is used for placing an audio resource before it is played, before or after the element so as to delimit the latter.

Values	<cue-before> [ URL | none ] <cue-after> [ URL | none ] inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


cue-before

Index	See also	Basic CSS Concepts	Units of measurement

This property is used for placing and audio resource before it is played and it is located before the element so as to delimit the latter.

Values	URL URL address of the sound source. none No sound will be played.  inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


cue-after

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to place and audio resource before it is played and it is located after the element so as to delimit the latter.

Values	URL URL address of the sound source. none No sound will be played. inherit (applies the parent element values)
Initial value	none
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


elevation

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the point with a vertical origin of a sound content in the space, in order to provide optimum reproduction quality when the content is played in an audio media.

Possible values	angle  Specify the value in terms of degrees  on a vertical. The value must be in the -90deg and 90deg range.  below Same as -90deg. level Same as 0deg. above Same as 90deg. higher Add 10 degrees to the current value.  lower Subtract 10 degrees from the current value.  inherit (applies the parent element values)
Initial value	level (0 degrees)
Application	All elements.
Media types	audio: vocal synthesizer, tv sets


pause

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define in one declaration block the values for the pause-after and pause-before  properties.

These properties indicate a pause period before or after the spoken content of an element.

Values	<pause-before> [ time | <percentage> ] <pause-after> [ time | <percentage> ] inherit (applies the parent element values)
Initial value	Refer to individual properties
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


pause-before

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define a pause period before the spoken content of an element.

Values	time Unit of time. Number of ms (milliseconds)  or s (seconds) percentage The value is expressed as a percentage based on the size of the parent element. inherit (applies the parent element values)
Initial value	Depends on the browser software used.
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


pause-after

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define a pause period after the spoken content of an element.

Values	time Unit of time. Number of ms (milliseconds)  or s (seconds) percentage The value is expressed as a percentage based on the size of the parent element. inherit (applies the parent element values)
Initial value	Depends on the browser software used.
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


pitch

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the average pitch (frequency) of the speaking voice for an element with a spoken content.

Values	frequency Hertz frequency unit. Number of Hz. x-low This value is based on the value of the voice-family property and the user's equipment. low Idem medium Idem high Idem x-high Idem inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


pitch-range

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the variation of the average pitch (frequency) of the speaking voice for an element with a spoken content.

Values	number A value between 0 and 100. Zero (0) indicates no variation, 50 a normal variation, and a value higher than 50 produces animated voices. inherit (applies the parent element values)
Initial value	50
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


play-during

Index	Basic CSS Concepts	Units of measurement

This property specifies the sound  played in the background while another sound (for example, a voice speaking) is being played.

Values	URL Address of the sound source. mix Mixes the parent element's sound and the sound specified by the property. repeat The file is repeated as many times as necessary. This means that the sound will repeat itself for the duration of the parent element's sound. auto The parent element's sound continues to play. none No sound is played.  inherit (applies the parent element values)
Initial value	auto
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


richness

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify a rich or bright voice.

Values	number A number between 0 and 100. Values lower than 50 produce a voice that is soft and flat, values of 50 and over produce a clear voice. inherit (applies the parent element values)
Initial value	50
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


speak

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies whether text will be rendered aurally and if so, in what manner.

Values	normal Uses the language's pronunciation rules. none Suppresses aural rendering of text. spell-out Spells the text one letter at a time. inherit (applies the parent element values)
Initial value	normal
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


speak-header

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies whether table headers are spoken before every cell, or only before a cell when that cell is associated with a different header than the previous cell.

Values	once The header is spoken one time, before a series of cells. always The header is spoken before every pertinent cell. inherit (applies the parent element values)
Initial value	once
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


speak-numeral

Index	See also	Basic CSS Concepts	Units of measurement

This property controls how numerals are spoken.

Values	digits Speak the numeral as individual digits i.e. number by number. For example: 102 is spoken as: One, Zero, Two. continuous Speak the numeral as a full number. For example, 102 is spoken as: One hundred and two. inherit (applies the parent element values)
Initial value	continuous
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


speak-ponctuation
speak-punctuation

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies how punctuation is spoken.

Values	code Punctuation are spoken and named. none Punctuation is rendered naturally with pertinent pauses and silences. none (inherit: applies the parent element values)
Initial value	none
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


speech-rate

Index	See also	Basic CSS Concepts	Units of measurement

This property specifies the speaking rate.

Values	number Specifies the speaking rate in words per minute. x-slow 80 words/minute. slow 120 words/minute medium 180 - 200 words/minute fast 300 words/minute x-fast 500 words/minute faster 40 words/minute are added to the current value. slower 40 words/minute are subtracted from the current value.  inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


stress

Index	See also	Basic CSS Concepts	Units of measurement

Specifies the maximum value of peaks in the intonation contour of a voice.

Values	number A number between 0 and 100. In this case values depend highly on the language being spoken. inherit (applies the parent element values)
Initial value	50
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


voice-family

Index	Basic CSS Concepts	Units of measurement

This property is used to choose from voice family names. This property is similar to the font-family values. Used to specify a voice style.

Values	generic-voice Examples: male | female | child specific-voice Examples: comedian | carlos inherit (applies the parent element values)
Initial value	Depends on the application.
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


volume

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify the sound volume.

Values	number A number between 0 and 100. Zero (0) produces a minimum volume while 100 produces the maximum volume. percentage A percentage of the inherited value converted to a number between 0 and 100. silent No volume.  x-soft Same as 0. soft Same as 25. medium Same as 50. loud Same as 75. x-loud Same as 100. inherit (applies the parent element values)
Initial value	medium
Application	All elements.
Target Media	aural: vocal synthesizer, tv sets


ruby-align

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to indicate the position of text (ruby-text) specific to an element <RT>.

Values	auto The browser software determines positioning. left Text is aligned to the left with the baseline. center Text is centered with the baseline. distribute-letter Text is distributed with respect to the baseline characters. distribute-space Text is distributed with respect to baseline spacing.  line-edge Text is centered if it is not adjacent to a line limit. If it is adjacent, then the "ruby-text" side aligns with the baseline text side.
Initial value	auto
Application	Element <RUBY>.
Target Media	visual: computer screens, tv sets, projectors, tty screens


ruby-overhang

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to specify how text (ruby-text) should overhang the element's remaining text.

Values	above ruby-text overhangs all other text adjacent to the baseline text. inline ruby-text only overhangs white-space. none ruby-text only overhangs text adjacent to the baseline.
Initial value	above
Application	Element <RUBY>.
Target Media	visual: computer screens, tv sets, projectors, tty screens


ruby-position

Index	See also	Basic CSS Concepts	Units of measurement

This property is used to define the position of text (ruby-text) specific to an element <RT>.

Values	above ruby-text is placed above the baseline text. inline ruby-text is placed on the same line as the baseline text.
Initial value	above
Application	Element <RUBY>.
Target Media	visual: computer screens, tv sets, projectors, tty screens


Introduction to CSS2 Reference

Index	Basic CSS Concepts	Units of Measurement

Styles, and specially style sheets, are the most powerful and useful tools for HTML document authors. Somewhat like word processors, styles provide an efficient method to control the appearance and display of documents when consulted by the user.

Better yet, style sheets permit separating content from form, which allows for more interesting design methods and allows the information contained in HTML documents to be used by different applications.

Keep in mind that not all browsers interpret CSS2 properties to the same degree. Therefore, it is recommended to test HTML documents that contain styles and style sheets with different browsers before putting them on line.

CSS stands for Cascading Style Sheets . There was an original specification with the CSS1 standard (CSS, level 1), and we are now on the second one with  CSS2 (CSS, level 2). These specifications have been worked out by the  W3C (World Wide Web Consortium). Also, Microsoft has added some properties of their own. The latter are often interpreted by Internet Explorer only, the browser developed by the company.

The CSS2 reference in AceExpert 2000 recommends an overview of CSS2 based on W3C's CSS2 standard and Microsoft's CSS reference (for more information concerning CSS properties particular to Microsoft).

To consult official references, we recommend that you visit the following sites:

W3C Cascading Style Sheet
(http://www.w3.org/Style/CSS)

Microsoft's CSS Attributes Reference on the MSDN site
(http://www.msdn.microsoft.com/workshop/author/css/reference/attributes.asp)


Conventions

Index	Basic CSS Concepts	Units of Measurement
Icons used in this reference

Where necessary, icons indicate the following:

	World Wide Web  Consortium www.w3.org	Properties marked with the W3C icon are part of the CSS2 reference, but cannot be interpreted by Microsoft Internet Explorer (version 5) and Netscape Navigator (version 4.x).
	Internet Explorer  versions 4 and 5 Microsoft www.microsoft.com/ie	Properties marked with this icon are interpreted by Internet Explorer only.
Typographic elements

Appearance	Use
Property value	Property values appear in blue and in a fixed width font for values or value components which can be used as is.
Information concerning a property	When the text appears in a fixed width font in black, the information pertains to one or more property values but these elements cannot be used as is in CSS syntax. It simply indicates that the information refers to a command value or label in the AceExpert code inspector.


Basic CSS2 Concepts

•	Style sheets and inline styles

•	Rules: components, and syntax

•	Selector-classes

•	Pseudo-classes

•	Pseudo-elements

•	Special rules

•	@import

•	@media

•	@page

•	Boxes

•	Insert comments


Style sheets and inline styles

Index	Basic CSS Concepts	Units of Measurement
Style sheet

A style sheet is composed of a set of style descriptions. There are two types of style sheets; internal style sheets (in the HTML document), and external style sheets.

In both cases, each style is described using the following syntax:

Selector  {property: value; property: value …}

Example:

H2 {COLOR: navy; FONT: 18px; FONT-FAMILY: sans-serif}

Internal style sheet

An internal style sheet is inserted in the header of the HTML file using the  <STYLE>  element which  introduces the rules for each of the styles in the internal sheet.

These styles can then be applied in documents by placing the  class attribute inside the opening tags of the elements on which you want to apply them.

When the selector has the same name as an element, the style will be applied on the element without having to add the  class attribute.

HTML document Header

<HEAD>
<TITLE>Document name</TITLE>
<style>
<!--
A { COLOR: red }
.toto {COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif}
-->
</style>
</HEAD>

Applying a style to an element

<P CLASS="toto">paragraph text…

External style sheet

An external style sheet is a text file which usually has a .css extension. This file must be the target of a link if you want to be able to use the styles it contains in an HTML document. This link must be defined in the HTML document header as follows:

<HTML>
<HEAD>
<TITLE>Style Sheet History</TITLE>
<link REL="StyleSheet" TYPE="text/css" HREF="../styles.css">
</HEAD>

Inline styles

Contrary to a style sheet, an inline style description is inserted directly in the opening tag of an HTML document. The style is applied using the HTML style attribute inserted in the element's opening tag.

Example:

<P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif">


Rules: components and syntax

Index	Basic CSS Concepts	Units of Measurement

Rules are the basis of all style sheets. They have a precise syntax and are constructed as follows:

Selector  {property: value; property: value …}

-	A rule consists of a selector followed by a declaration block which defines the style.

-	The selector identifies the style, it gives it its name. Almost all HTML element names are potential selectors since styles are applied to HTML elements. Other selector names may be defined, these are called pseudo-classes.

-	Curly braces ( {   } ) define the limits of a  declaration block. A declaration block is composed of all the declarations which make up a style.

-	A declaration consists of a property name, followed by a colon ( : ) and the values associated to the property. When there is more than one declaration for a style, they are separated by semicolons ( ; ).

-	In a way, CSS properties are commands which affect the formatting of the content. There are more than a hundred properties in the CSS2 specification.

-	The values indicate how the properties must be applied on the content. Values are defined by units of measurement or, in other instances, the name of a value itself is enough to indicate the action to be executed.

Grouped selectors

It is also possible to group several selectors for the same style description.

Example:

H1, H2, H3, H4 {color: blue}

is the same as:

H1 {color: blue}

H2 {color: blue}

H3 {color: blue}

H4 {color: blue}


Selector-classes

Index	Basic CSS Concepts	Units of Measurement

It is possible to add a class to a selector. This way, the same element can have many descriptions and styles. This gives the author a degree of flexibility  for formatting documents.

Example:

Q.fre {color: blue}

Q.eng  {color: red}

The application of these styles is done by inserting the  class attribute in the element's opening tag:

<Q CLASS="fre">element's content…

<Q CLASS="eng">element's content…


Pseudo-elements

Index	Basic CSS Concepts	Units of Measurement

There are four pseudo-elements. They permit formatting content impossible to identify with HTML language.

Pseudo-element	Description
:first-line	Selects the first line of a particular element, for example, the first line of a paragraph. Example of the rule: P:first-line {color: blue} the first line of each paragraph will be displayed in blue.
:first-letter	Selects the first letter of a particular element, for example, the first letter of a paragraph. Example of the rule: P:first-line {font-size: 24pt} the first letter of each paragraph will be displayed in 24 point font size.
:after  :before	These pseudo-elements allow inserting text or images before or after the element's text.


Pseudo-classes

Index	Basic CSS Concepts	Units of Measurement

Pseudo-classes are, in fact, special classes which allow applying particular style effects on elements without having to apply the style on elements with a class attribute. Some of the effects are dynamic and appear during or after some action by the user.

Pseudo-class :first-child

:first-child	The :first-child pseudo-class affects the first child element of another element.  Example of the rule: DIV > P:first-child {color: blue} Here it is important to note the syntax used to indicate a child element in a style rule.  The first selector indicates the parent element, the symbol > precedes the second selector for which the  :first-child pseudo-class has been specified. Consequently, every first "paragraph" child element of a  <DIV> element will be displayed in blue in the document.

Pseudo-classes for links

:link :visited	These pseudo-classes allow defining a style for non-visited links and another for visited links. Example of the rule: A:link {color: blue} A:visited {color: green} Consequently, non-visited links will be displayed in blue and visited links will be displayed in green.

Dynamic pseudo-classes

	F 6>These pseudo-classes allow defining style effects which appear after actions carried out by the user.
:hover	Appears once the user points at the element: Example of the rule: A:hover {background-color: yellow} will make the background color of a hyperlink turn yellow when the user points at it.
:active	Appears when the user activates (clicks) on an element: Example of the rule: A:active {color: red} will make the text color of a hyperlink turn red when the user clicks on it.
:focus	Appears when the element obtains focus through the keyboard or the mouse pointer. Example of the rule: A:focus {font-size: larger} will make the font size increase by a notch when the element obtains focus.

Language pseudo-classes

:lang	This pseudo-class allows defining the language to be used on a selector, when required by the properties used. Example of the rule: HTML:lang(fr) { quotes: '« ' ' »' } This rules makes the  quotes property to display French quotation marks when they are used in the document.


Special rules

Index	Basic CSS Concepts	Units of Measurement

There are some CSS2 rules used to provide special information to the application which must read and interpret the style sheet. They are called AT-rules or @rules.

@import

The @import rule is used at the beginning of a style sheet when the author wants to import all the rules from another style sheet. This value must be a URL indicating the location and name of the style sheet.

Example of the rule:

@import url(http://www.network.com/styles.css)

It is important to mention that all rules of this type must be declared before any other rule.

It is possible to insert several @import rules one after the other.

@media

The @media rule allows defining for which media the following rules have been designed. There can be many @media rules in the same style sheet. Each of them must be placed above the pertinent style rules.

Example of the rule:

@media print

{BODY {background-color: white}
… …

In this example, the following style rule applies to printers.

List of media and their names:

all	All media.

aural	Voice synthesizers.

braille	Braille reading media.

embossed	Braille printers.

handheld	Small screens, monochrome screens, etc.

print	Printers and print preview devices.

projection	Projectors, electronic slides.

screen	Computer screens.

tty	Teletype terminals.

tv	Television

@page

Defining the parameters of a page box is not absolutely necessary in a document unless you want to control certain special aspects concerning the latter's display.

The @page rule allows the author of a document to include instructions concerning the size, orientation, margins, etc. of a page box.

A page box is a zone containing two areas called page area and margin area. The page box acts as the initial containing box for all formatting up to the next page break.

The @page rule uses the following properties:

size, margin, marks

Example:

@page { size: 8.5in 11in; margin: 2in }

Left and right page properties are shown as follows:

@page :left { size: 8.5in 11in; margin: 2in }

@page :right { size: 8.5in 14in; margin: 2in }

It is also possible to specify properties for the first page of the document:

@page :first { size: landscape; margin: 2in }


Boxes

Index	Basic CSS Concepts	Units of Measurement

The use of boxes is an important concept when using CSS2. It allows defining an area in which you can apply different properties. It is therefore necessary to clearly understand the different aspects of this concept.

1-	The contents of almost every element are inserted in boxes. A box can also be placed inside another box, and this one can also be placed inside another box, etc. A box containing another box is called the containing box of the second box.

2-	Each box is composed of several named rectangles that play an important part.

These rectangles contain:

•	margins

•	borders

•	padding area

•	content box


Insert comments

Index	Basic CSS Concepts	Units of Measurement

It is possible to include comments in a style sheets, even inside a style declaration block , which are not interpreted by the browser and therefore no errors occur.

In a style sheet, comments begin with  */.

Example:

IMG { float: left }  /* comment goes here */


CSS2 Glossary Reference

Boxes

The use of boxes is an important concept when using CSS2. It allows defining an area in which you can apply different properties. It is therefore necessary to clearly understand the different aspects of this concept.

1.	The contents of almost every element are inserted in boxes. A box can also be placed inside another box, and this one can also be placed inside another box, etc. A box containing another box is called the containing box of the second box.

2.	Each box is composed of several named rectangles that play an important part.

These rectangles contain:

•	Margins

•	Borders

•	Padding area

•	Content box

Containing box

A «containing box» is a box that contains another box. It is the containing box of a second box.

Element

In CSS2, the term «element» refers to an HTML element (<P>, <A>, <IMG>, etc.)

Parent Element

An element can contain text as well as sub-elements (of other elements) in which case it is called a «Parent element».

Inline

An element is called  «inline» or «inline level»  since its contents does not create a new block, rather the contents are distributed in the line itself.

Block Level

An element is called a «block level»  because its contents are preceeded and followed by a new line. Examples of these elements are P, H1, H2, H3, H4, H5, H6, blockquote.


Boxes

The use of boxes is an important concept when using CSS2. It allows defining an area in which you can apply different properties. It is therefore necessary to clearly understand the different aspects of this concept.

1.	The contents of almost every element are inserted in boxes. A box can also be placed inside another box, and this one can also be placed inside another box, etc. A box containing another box is called the containing box of the second box.

2.	Each box is composed of several named rectangles that play an important part.

These rectangles contain:

• Margins • Borders • Padding area • Content box	•


Containing box

A «containing box» is a box that contains another box. It is the containing box of a second box.


Element

In CSS2, the term «element» refers to an HTML element (<P>, <A>, <IMG>, etc.)


Parent Element

An element can contain text as well as sub-elements (of other elements) in which case it is called a «Parent element».


Inline

An element is called  «inline» or «inline level»  since its contents does not create a new block, rather the contents are distributed in the line itself.


Block Level

An element is called a «block level»  because its contents are preceeded and followed by a new line. Examples of these elements are P, H1, H2, H3, H4, H5, H6, blockquote.


Alphabetic List of Properties

Basic CSS Concepts	Units of measurement

- A -

azimuth

- B -

background

background-attachement

background-color

background-image

background-position

background-repeat

behavior

border

border-bottom

border-bottom-color

border-bottom-style

border-bottom-width

border-collapse

border-color

border-left

border-left-color

border-left-style

border-left-width

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-top

border-top-color

border-top-style

border-top-width

border-width

bottom

- C -

caption-side

clear

clip

color

content

counter-increments

counter-reset

cue

cue-after

cue-before

cursor

- D -

direction

display

- E -

elevation

empty-cells

- F -

filter

float

font

font-family

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-weight

- H -

height

- L -

layout-grid

layout-grid-char

layout-grid-char-spacing

layout-grid-line

layout-grid-mode

layout-grid-type

left

letter-spacing

line-break

line-height

list-style

list-style-image

list-style-position

list-style-type

- M -

margin

margin-bottom

margin-left

margin-right

margin-top

marker-offset

marks

max-height

max-width

min-height

min-width

- O -

orphans

outline

outline-color

outline-style

outline-width

overflow

- P -

padding

padding-bottom

padding-left

padding-right

padding-top

page

page-break-after

page-break-before

page-break-inside

pause

pause-after

pause-before

pitch

pitch-range

play-during

position

- Q -

quotes

- R -

richness

right

ruby-align

ruby-overhang

ruby-position

- S -

size

speak

speak-header

speak-numeral

speak-ponctuation

speech-rate

stress

- T -

table-layout

text-align

text-decoration

text-indent

text-justify

text-shadow

text-transform

top

- U -

unicode-bidi

- V -

vertical-align

visibility

voice-family

volume

- W -

white-space

widows

width

word-break

word-spacing

- Z -

z-index